<template>
    <div class="type-content-box">
        <div class="type-title flex-start-row">
            <el-icon style="margin-right: 10px;">
                <Link />
            </el-icon>
            <slot></slot>
        </div>
        <div class="type-content-container flex-start-start">
            <MyImage class="type-item" v-for="item in MovieList" :url="item.movieCover" :data="item" :fs='20'
                fc='#ffffff' :date="current"/>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, defineProps, watch } from 'vue'
import { getScheduledMovie } from '../../../../api/movie'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import MyImage from '../../../../components/MyImage.vue';

const props = defineProps<{
    offsetIndex: number
    typeId: number
}
>();

const current = ref('')
let timer:any = null 

onMounted(() => {
    timer = setInterval(getScheduledMovieApi, 4000)
})

interface IHotMovie {
    movieCover: string
    movieDesc: string
    movieId: number
    movieName: string
    movieScore: number
    movieScoreNum: number
    movieTypeId: number
    movieView: number
    movieDuring: number
}

let MovieList = ref<IHotMovie[]>()
const cityname = JSON.parse(window.sessionStorage.getItem("location")!).cityname


const getScheduledMovieApi = () => {
    console.log(dayjs().add(props.offsetIndex, 'day').format("YYYY-MM-DD"));
    getScheduledMovie({ cityname: cityname, date: dayjs().add(props.offsetIndex, 'day').format("YYYY-MM-DD") })
        .then((res: any) => {
            if (res.code == 200) {
                MovieList.value = res.data.filter((item: any) => {
                    return item.movieTypeId == props.typeId
                })
                console.log("影片分类->获取排班", MovieList.value, res.data);
            } else {
                ElMessage.error("获取排班失败")
            }
        })
}

watch(
    () => props.offsetIndex,
    (n, o) => {
        getScheduledMovieApi()
        current.value = dayjs().add(props.offsetIndex,'day').format("YYYY-MM-DD")
    },
    { immediate: true }
)

onUnmounted(() => {
    clearInterval(timer)
})

</script>

<style lang="less" scoped>
// 该变量关联MyHeader组件
@leftAndRight: 100px;
@headerHeight: 75px;
@typeBarHeight: 68px;

.type-title {
    font-size: 30px;
}

.type-content-box {
    position: relative;
    margin-top: 40px;
    width: calc(100% - @leftAndRight * 2);
}

.type-content-container {
    padding: 20px 0px;
    overflow-x: auto;
}

.type-item {
    flex: 0 0 30%;
    height: 230px;
    border-radius: 20px;
    margin-right: 20px;

    &:last-child {
        margin-right: 0px;
    }
}
</style>